<!-- 
Copyright 2013 Google Inc. All Rights Reserved.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

-->

<!DOCTYPE html>

<link rel="author" title="Sandy Phan, Sarah Heimlich", 
  href="mailto:sandyphan@google.com, sarahheimlich@google.com">
<title>Parallel Animation</title>
<meta name="flags" content="dom">
<meta name="tutorial" content="Web Animations tutorials">
<link rel="stylesheet" type="text/css" href="../tutorial-style.css">
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript" src="../page-load.js"></script>

<ul class="topMenu">
  <li><a href="../home-page.html">Home</a></li>
  <li><a href="#">Tutorials</a>
    <ul class="subMenu">
      <li><a href="../basic-animations/basic-animation.html">
      Basic Animations</a></li>
      <li><a href="parallel.html">Parallel Animations</a></li>
      <li><a href="../sequence/sequence.html">Sequence Animations
      </a></li>
      <li><a href="../timing-dictionary/timing-dictionary.html">
      Timing Dictionary</a></li>
      <li><a href="../timing-functions/timing-function.html">
      Timing Functions</a></li>
    </ul>
  </li>
  <li><a href="../references/references.html">References</a></li>
  <li><a href="../about.html">About</a></li>
</ul>
<div id="main">

  <div id="title">Web Animations Tutorial</div>
  
  <div class="line-separator"></div>

  <div class="content">
    <p class="description">Web animations is to have a flash or GIF animation
    intergrated onto the web page. Normal web animations still require 
    the use of plugins such as Java Applets, Shockwave, Adobe Flash. In this 
    tutorial, we will be showing you how to create animations using 
    javascript without the need of installing plugins.</p>

    <br />

    <div class="heading subTitle">Parallel Animation Group</div>

    <p class="description">There certainly are times when you want to 
    group items together such that they have the same features and effects. 
    There are 2 types of groupings: parallel and sequential. In this 
    section you will learn about parallel groups and what kind of 
    feature does it have to help you write less code.</p>

    <p class="description">Just as what the name of the group means, all 
    the children being grouped in a parallel group will run in parallel, 
    that is they will start together and of course they will end at 
    different time depends on their durations.</p>

    <p class="description">The following is the interface for creating 
    a parallel animation group.</p>

    <code class="codeSamples">new AnimationGroup([children], 
    {timing/timing dictionary});</code>

    <p class="description note">Note that both children and timing are 
    nullable (i.e. you can leave children as [] if you don't want to 
    specify a child). Though only timing is optional</p>

    <div class="separator"></div>

  </div>  <!-- content ending div -->
  <div class="line-separator"></div>
</div> <!-- main ending div -->

<ul class="sideMenu">
  <li id="menuLabel">Parallel Animation Group</li>
  <li>Basic Info</li>
  <li>Exercise 1</li>
  <li>Exercise 2</li>
  <li>Exercise 3</li>
</ul>

<div class="separator"></div>

<script type="text/javascript" src="../try-it-yourself.js"></script>